<template>
  <view class="book-container">
    <view class="book-item" v-for="(item, i) in bookList" :key="i" @click="toBookInfo(item)">
      <image :src="item.cover" mode="aspectFit" ></image>
      <view class="info">
        <view class="book-name uni-ellipsis">{{item.name}}</view>
        <view class="book-time">{{item.time}}</view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'readHistory',
  data() {
    return {
      bookList: [
        {name: '想都别想', cover: '../../../static/test/manhua.png', time: '2020-10-03', tags: []},
        {name: '做梦吧你', cover: '../../../static/test/manhua.png', time: '2020-10-03', tags: []},
        {name: '就算是阿Q精神，也要有追求美好生活的勇气。', cover: '../../../static/test/manhua.png', time: '2020-10-04', tags: []},
        {name: '就算是阿Q精神，也要有追求美好生活的勇气。', cover: '../../../static/test/manhua.png', time: '2020-10-04', tags: []},
        {name: '就算是阿Q精神，也要有追求美好生活的勇气。', cover: '../../../static/test/manhua.png', time: '2020-10-04', tags: []},
      ],
    }
  },
  computed: {
    ...mapState(['loginProvider'])
  },
  onShow() {
    this.getReadingHistory()
  },
  methods: {
    getReadingHistory(){
      //获取阅读历史
    },
    toBookInfo(e) {
      console.log(e)
    }
  },
}
</script>

<style lang="scss" scoped>
.book-container {
  width: 750rpx;
  height: 100%;
  // display: flex;
  // justify-content: space-around;
  // align-items: center;
  // flex-wrap: wrap;
  .book-item {
    width: 230rpx;
    // display: inline-block;
    margin: 10rpx 10rpx;
    float: left;
    height: 340rpx;
    box-shadow: 0 0 5rpx #ccc;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    position: relative;
    .info {
      position: absolute;
      bottom: 0;
      left: 0;
      padding: 0 3rpx;
      width: 100%;
      height: 80rpx;
      color: #FFF;
      background: rgba($color: #000000, $alpha: 0.3);
      box-shadow: 0 0 5rpx #ccc;
      .book-name {
        height: 40rpx;
        font-size: 25rpx;
      }
      .book-time {
        height: 40rpx;
        font-size: 16rpx;
      }
    }
  }
}
</style>